<template>
    <v-form ref="fieldFormRef">
        <div v-for="(item, index) in props.fields" :key="index">
            <!-- isActive -->
            <div v-if="item.field == 'isActive' || item == 'isActive'">
                <mrc_ess_Switch v-model="formData.isActive" color="success" :inset="false" :mode="props.formType">
                </mrc_ess_Switch>
                <div :class="props.formType == 'view' ? 'pb-4' : 'pb-8'"></div>
            </div>
            <!-- name -->
            <mrc_ess_Input v-if="item.field == 'name' || item == 'name'" v-model="formData.name"
                :label="$t('label_name')" placeholder="text" :mode="props.formType">
            </mrc_ess_Input>
            <!-- description -->
            <mrc_ess_Input v-if="item.field == 'description' || item == 'description'" v-model="formData.description"
                :label="$t('label_description')" placeholder="text" :mode="props.formType">
            </mrc_ess_Input>
            <!-- code -->
            <mrc_ess_Input v-if="item.field == 'code' || item == 'code'" v-model="formData.code"
                :label="$t('label_code')" placeholder="text" :mode="props.formType">
            </mrc_ess_Input>
            <!-- sequence -->
            <mrc_ess_InputNumber v-if="item.field == 'sequence' || item == 'sequence'" :label="$t('label_sequence')"
                placeholder="text" v-model="formData.sequence" :mode="props.formType">
            </mrc_ess_InputNumber>
            <!-- propertyGroup -->
            <mrc_ess_Select  v-if="item.field == 'propertyGroup' || item == 'propertyGroup'" v-model="formData.propertyGroup" :label="$t('label_property_group')" placeholder="text"
                :mode="props.formType">
            </mrc_ess_Select>
            <!-- weight -->
            <mrc_ess_InputNumber v-if="item.field == 'weight' || item == 'weight'" :label="$t('label_weight')"
                placeholder="text" v-model="formData.weight" :mode="props.formType">
            </mrc_ess_InputNumber>
            <!-- isExternal -->
            <mrc_ess_RadioGroup v-if="item.field == 'isExternal' || item == 'isExternal'" :label="$t('lable_is_external')" :items="yesOrNoItems" inline v-model="formData.isExternal" :mode="props.formType"></mrc_ess_RadioGroup>
        </div>
    </v-form>
</template>

<script lang="ts" setup>
import { ref, watch, toRaw } from 'vue';

const props = defineProps({
    formType: {
        type: String,
        default: 'add'
    },
    fields: {
        type: Array,
        default: ['isActive', 'name', 'description', 'code', 'sequence']
    }
})

// 表单
const fieldFormRef = ref<any>(null);

// 表单类型发生变化
watch(() => props.formType, (val) => {
    if (val == "edit") {
        // 记录源数据
        rawData.value = JSON.parse(JSON.stringify(toRaw(formData.value)));
    } else if (val == "view") {
        // 恢复源数据
        formData.value = JSON.parse(JSON.stringify(toRaw(rawData.value)));
    }
})

const rules = {
    required: value => !!value || 'Field is required'
}

const yesOrNoItems = [{ value: true, title: "Yes", i18n: "label_yes" }, { value: false, title: "No", i18n: "label_no" }]

// 源数据
const rawData = ref<any>({});
// 表单数据
const formData = ref({
    isActive: true,
    name: '',
    description: '',
    code: '',
    sequence: 0,
    propertyGroup: "",
    weight: "",
    isExternal: false
})

/**
 * 设置表单数据
 */
function setFormData(data: any = null) {
    formData.value.name = data?.name || "";
    formData.value.description = data?.description || "";
    formData.value.code = data?.code || "";
    formData.value.sequence = data?.sequence || "";
    formData.value.isActive = data?.isActive || true;
    formData.value.propertyGroup = data?.propertyGroup || "";
    formData.value.weight = data?.weight || "";
    formData.value.isExternal = data?.isExternal || false;
}

/**
 * 验证表单
 */
function validate() {
    return new Promise(async (resolve, reject) => {
        const { valid, errors } = await fieldFormRef.value.validate();
        resolve({ valid, errors });
    })
}

defineExpose({
    formData,
    setFormData,
    resetFormData: () => {
        setFormData(null)
    },
    validate
})

</script>

<style scoped></style>